

function Tab (o) {
  // o.position left 或 top
  // 整个tab部分
  this.wrap = document.querySelector(o.ele);
  this.wrap.style.width = o.width;
  this.wrap.style.height = o.height;
  this.wrap.style.margin = "20px auto"
  if (o.position == "left") {
    this.wrap.style.display = "flex";
  }
  // 导航部分
  var ul = document.createElement("ul");
  if (o.position == "left") {
    ul.style.display = "block";
  } else {
    ul.style.display = "flex";
    ul.style.justifyContent = "space-around";
  }
  for (var i = 0; i < o.list.length; i++) {
    var li = document.createElement("li");
    li.innerHTML = o.list[i];
    li.style.height = o.liHeight;
    li.style.listStyle = "none";
    li.style.lineHeight = o.liHeight;
    if (i == 0) {
      li.style.background = "red";
      li.style.color = "white"
    } else {
      li.style.background = "green";
    }

    ul.appendChild(li)
  }
  this.wrap.appendChild(ul)


  // 生成div
  var divWrap = document.createElement("div");
  console.log(o.width)
  if (o.position == "left") {
    divWrap.style.width = parseInt(o.width) - ul.offsetWidth + "px";
  } else {
    divWrap.style.width = parseInt(o.width) + "px";
  }
  divWrap.style.height = parseInt(o.height) - parseInt(o.liHeight) + "px";
  divWrap.id = "content";
  for (var j = 0; j < o.list.length; j++) {
    var div = document.createElement("div");
    div.style.height = parseInt(o.height) - parseInt(o.liHeight) + "px";
    div.style.background = o.colorList[j];//设置不同的背景色
    divWrap.appendChild(div)
    if (j == 0) {
      div.style.display = "block";
    } else {
      div.style.display = "none";
    }
  }
  this.wrap.appendChild(divWrap)

  // 调用初始化方法
  this.init();
}
// 给li绑定事件
Tab.prototype.init = function () {
  // 获取到所有的li
  var that = this;
  this.lis = this.wrap.querySelectorAll("ul li");
  for (var i = 0; i < this.lis.length; i++) {
    this.lis[i].index = i;
    this.lis[i].onclick = function () {
      that.change(this)
    }
  }
}
// 切换
Tab.prototype.change = function (ele) {
  this.divs = this.wrap.querySelectorAll("#content>div")
  for (var j = 0; j < this.divs.length; j++) {
    this.lis[j].style.background = "green";
    this.lis[j].style.color = "black";
    this.divs[j].style.display = "none"
  }
  ele.style.background = "red";
  ele.style.color = "white";
  this.divs[ele.index].style.display = "block";
}



